code:
<header>
<h1>Theme Example</h1>
</header>
<main>
<section>
<h2>About Us</h2>
<p>Welcome to this demo, which showcases light, and dark modes for user preferences.</p>
</section>
<section>
<h2>Contact Us</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter your username">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter a secure password">
<label for="age">Age:</label>
<input type="number" id="age" placeholder="Enter your age">
<label for="color">Favorite Color:</label>
<input type="color" id="color">
<label for="gender">Gender:</label>
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label>
<input type="checkbox" id="subscribe"> Subscribe to our newsletter
</label>
<button type="submit">Submit</button>
</form>
</section>
<section>
<h2>Services</h2>
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>SEO Optimization</li>
<li>Accessibility Improvements</li>
</ul>
</section>
<section>
<h2>Pricing Table</h2>
<table>
<thead>
<tr>
<th>Service</th>
<th>Basic</th>
<th>Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web Design</td>
<td>$500</td>
<td>$1000</td>
</tr>
<tr>
<td>Web Development</td>
<td>$1000</td>
<td>$2000</td>
</tr>
<tr>
<td>SEO Optimization</td>
<td>$300</td>
<td>$600</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>FAQs</h2>
<details>
<summary>What is this page about?</summary>
<p>This page demonstrates toggling between light, dark, and high contrast modes for better user experience.</p>
</details>
<details>
<summary>How do I use the theme toggles?</summary>
<p>Click on the buttons at the top of the page to change the theme.</p>
</details>
<details>
<summary>Is this page responsive?</summary>
<p>Yes! It adapts to various screen sizes and system preferences.</p>
</details>
</section>
</main>
<style>
/* Light Mode */
:root { --background-color: white; --text-color: black; --form-bg: #f0f0f0; --form-border: #ccc; --form-color: black; --button-bg: #e0e0e0; --button-text: black;}
body { background-color: var(--background-color); color: var(--text-color); font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6;}
header { padding: 20px; text-align: center; color: var(--form-color); background-color: var(--form-bg);}
main {max-width: 1200px; margin: 0 auto; padding: 20px;}
section {margin-bottom: 30px;}
form {display: flex; flex-direction: column; gap: 15px; padding: 20px; background-color: var(--form-bg); border: 1px solid var(--form-border); border-radius: 8px;}
form label {font-weight: bold; color: var(--form-color);}
form input, form select, form button {padding: 10px; border: 1px solid var(--form-border); border-radius: 5px; font-size: 1rem;}
form button {background-color: var(--button-bg); color: var(--button-text); cursor: pointer;}
form button:hover {background-color: var(--text-color); color: var(--background-color);}
ul {padding: 0; list-style: none;}
ul li {padding: 5px 0;}
table {width: 100%; border-collapse: collapse; margin: 20px 0;}
table th, table td {border: 1px solid var(--form-border); padding: 10px; text-align: left;}
table th {background-color: var(--form-bg); font-weight: bold;}
details {margin: 10px 0;}
footer {text-align: center; padding: 10px; background-color: var(--form-bg); margin-top: 30px; }
/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {--background-color: black;--text-color: white;--form-color: white; --form-bg: #1e1e1e; --form-border: #555; --button-bg: #333; --button-text: white;
}
}
/* High Contrast */
.high-contrast { --background-color: yellow; --text-color: black; --form-bg: black; --form-border: yellow; --form-color: yellow; --button-bg: yellow;
--button-text: black; }
/* Responsive Design */
@media (max-width: 768px) {
#theme-controls {flex-direction: column;}
form {padding: 10px;}
table th, table td {font-size: 0.9rem;}
}
@media (max-width: 480px) {
header h1 {font-size: 1.5rem; }
#theme-controls button {padding: 8px 15px;}
form label, form input, form button {font-size: 0.9rem;}
}
</style>